<template>
  <div>
    <Header></Header>
    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="">岗位信息</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <!--职位搜索-->
    <div class="article" style="margin-bottom: 20px;">
      <el-row :gutter="20">

        <el-col :span="16">
          <el-card style="min-height: 1200px;overflow:visible;">
            <div slot="header" class="clearfix">
              <el-divider>要相信金子总会发光的哦！</el-divider>
                <el-form :inline="true" :model="form">
                  <el-form-item style="width: 300px;" >
                    <el-input v-model="pagination.queryParams.name" style="width: 300px;"  placeholder="职位关键字搜索"></el-input>
                  </el-form-item>


                  <el-form-item>
                    <el-select v-model="pagination.queryParams.count" placeholder="请选择岗位人数">
                      <el-option v-for ="(item,index) in postCountList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-select v-model="pagination.queryParams.salary" placeholder="请选择薪资">
                      <el-option v-for ="(item,index) in salaryList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-select v-model="pagination.queryParams.education" placeholder="请选择受教育程度">
                      <el-option v-for ="(item,index) in educationList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-select v-model="pagination.queryParams.experience" placeholder="请选择工作经验">
                      <el-option v-for ="(item,index) in experienceList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item style="margin-left: 10px;">
                    <el-button size="medium" icon="el-icon-search" @click="handleCurrentChange(1)">搜索</el-button>
                    <el-button type="info"   size="medium" icon="el-icon-refresh-right" @click="clearSearch()">重置</el-button>
                  </el-form-item>
                </el-form>
            </div>

            <!--职位列表-->
            <ul class="post-list">
              <li v-for="(item,index) in postList" :key="item.id">
                <a href="#">
                  {{item.name}}
                  <span style="float: right">
                       <el-button  type="primary" size="mini" @click="sendPost(item.id)" round>申请职位</el-button>
                        <el-button type="danger"  size="mini" @click="saveFavorPost(item.id)" round>收藏</el-button>
                  </span>
                </a>
                <p>
                  <span style="color: red;font-weight: bolder;">{{item.salary}}</span>
                  <span>{{item.type}}</span>
                  <span>{{item.size}}</span>
                  <span>{{item.companyName}}</span>
                </p>
              </li>
            </ul>
            <!--职位列表-->
            <!-- 分页组件-->
            <el-pagination
                style="margin-top: 20px; text-align: center"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes, prev, pager, next, jumper"
                background>
            </el-pagination>
            <!-- 分页组件-->

          </el-card>
        </el-col>
        <!--职位列表-->

        <!--热点文章展示区-->
        <el-col :span="8">
          <!--热点文章的卡片区-->
          <el-row :gutter="20">
            <HotArticle></HotArticle>
          </el-row>
          <!--热点文章的卡片区-->
        </el-col>
        <!--热点文章展示区-->
      </el-row>
    </div>


    <Footer></Footer>


  </div>
</template>

<script>
import '../assets/css/styles.css';
import Header from "@/front/inc/Header";
import Footer from "@/front/inc/Footer";
import HotArticle from "@/front/inc/HotArticle";
import {savePost} from "@/api/favor";
import {sendPost} from "@/api/send";
import {findDictListByTypeId} from "@/api/dict";
import {getPostList} from "@/api/post";




export default {
  name: "PostList",
  components: {HotArticle, Footer, Header},
  data(){
    return {
      postCountList:[], // 岗位人数集合
      salaryList:[], // 薪资字典集合
      educationList:[], // 学历字典集合
      experienceList:[], // 工作经历集合
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {}//查询条件
      },//分页数据模型数
      postList:[],//职位列表
      form:{
        name:'',
      },
      formData:{}//表单对象
    }
  },
  mounted() {
    this.findPostList()
    this.findPostCountList()
    this.findSalaryList()
    this.findEducationList()
    this.findExperienceList()
  },
  methods:{
    //收藏喜欢的职位
    saveFavorPost(id) {
      savePost(id).then(res => {
        this.$message({
          showClose: true,
          message: '收藏职位信息成功！',
          type: 'success',
          onClose: () => {
            this.findPostList()
          }
        })
      })
    },
    //岗位投递
    sendPost(id){
      sendPost(id).then(res=>{
        this.$message({
          showClose: true,
          message: '岗位投递成功！',
          type: 'success',
          onClose: () => {
            this.findPostList()
          }
        })
      })
    },
    //查询招聘人数字典集合
    findPostCountList(){
      findDictListByTypeId(5).then(res=>{
        this.postCountList = res.data;
      })
    },
    //查询薪资字典集合
    findSalaryList(){
      findDictListByTypeId(3).then(res=>{
        this.salaryList = res.data;
      })
    },
    //查询学历字典集合
    findEducationList(){
      findDictListByTypeId(2).then(res=>{
        this.educationList = res.data;
      })
    },
    //查询工作经历字典集合
    findExperienceList(){
      findDictListByTypeId(6).then(res=>{
        this.experienceList = res.data;
      })
    },
    //清空查询条件
    clearSearch(){
      this.pagination.queryParams = {}
      this.findPage()
    },
    //查询职位信息
    findPostList(){
      getPostList(this.pagination).then(res=>{
        this.postList = res.data.rows;
        this.pagination.total = res.data.total;
      })
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPostList()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPostList()
    },
  },
}
</script>

<style scoped>

</style>
